<template>
  <div>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      class="w-full dialog-form"
      label-width="auto"
      size="small"
    >

      <el-form-item label="角色名称" prop="deptId">
        <el-input v-model="ruleForm.deptCode" placeholder="请输入 角色名称"/>
      </el-form-item>
      <el-form-item label="角色别名" prop="deptCode">
        <el-input v-model="ruleForm.deptCode" placeholder="请输入 角色别名"/>
      </el-form-item>
      <el-form-item label="上级角色" prop="deptName">
        <el-select v-model="ruleForm.deptId" placeholder="请选择 上级角色">
          <el-option label="Zone one" value="shanghai"/>
          <el-option label="Zone two" value="beijing"/>
        </el-select>
      </el-form-item>
      <el-form-item label="角色排序" prop="shortName">
        <el-input v-model="ruleForm.shortName" placeholder="请输入 部门简称"/>
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts">
  import {defineComponent, getCurrentInstance, reactive, ref, toRaw} from "vue";
  import type { ComponentSize, FormInstance, FormRules } from 'element-plus'

  export default defineComponent({
    name: 'EditForm',
    expose: ['init', 'submitForm',],
    emits: ['init', 'submitForm','register'],
    setup(props, { emit }) {
      const ruleFormRef = ref<FormInstance>()
      const ruleForm = reactive<any>({
        deptName: '',
        shortName: '',
        deptCode: '',
        deptLevel: '',
        deptType: '',
        sort: '',
        deptId: '',
      })
      const rules = reactive<any>({
        deptId:[
          {
            required: true,
            message: '请选择 上级机构',
            trigger: 'change',
          },
        ],
        deptCode: [
          { required: true, message: '请输入 部门编号', trigger: 'blur' },
        ],
        deptName: [
          { required: true, message: '请输入 部门名称', trigger: 'blur' },
        ],
        shortName: [
          { required: true, message: '请输入 部门简称', trigger: 'blur' },
        ],
        sort: [
          { required: true, message: '请输入 排序', trigger: 'blur' },
        ],
        deptLevel: [
          {
            required: true,
            message: '请选择 部门层级',
            trigger: 'change',
          },
        ],
        deptType: [
          {
            required: true,
            message: '请选择 部门分级',
            trigger: 'change',
          },
        ],
      })

      const submitForm = async () => {
        if (!ruleFormRef.value) return

        const valid = await ruleFormRef.value.validate()

        if (valid) {
          return Promise.resolve(toRaw(ruleForm))
        } else {
          return Promise.reject()
        }
      }


      const resetFields = () => {
        ruleFormRef.value.resetFields()
      }
      const init = () => {
        console.log('inti')
      }

      const instance = getCurrentInstance()
      emit('register', instance)

      return {
        init,
        submitForm,
        resetFields,
        rules,
        ruleForm,
        ruleFormRef,
      }
    }
  })
</script>
<style lang="scss">
  .dialog-form {
    .el-input-number {
      width: 100%!important;
      input {
        text-align: left;
      }
    }
  }
</style>
